<!DOCTYPE html>
<html class="hb-loaded"><head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="keywords" content="单个商品页面">
    <title>单个商品页面</title>
    <link rel="stylesheet" href="../../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../../css/style.css">
    <script src="../../jquery/jquery-3.4.1.min.js"></script>
    <style>
            .btn {

                -webkit-border-radius: 40px;

                -moz-border-radius: 40px;

                border-radius: 40px;
                width:200px;

                height: 40px;
            }

        /*radio样式*/
        .RadioStyle input{
                display:none;
            }
        .RadioStyle label{
                font-size: 16px;
                border:1px solid #ddd;
                color:#777;
                /*padding:2px 10px 2px 5px;*/
                line-height:40px;
                width:240px;

                text-align:center;
                float:left;
                /*margin:2px 3px 3px 2px;*/
                border-radius:6px;
                margin-left: 15px;
                margin-bottom: 15px;
            }
        .RadioStyle input:checked+label{
                /*background:url('images/黑乔1.jpg') no-repeat right bottom;*/
                border:1px solid #3875d7;
                /*background-size:21px 21px;*/
                color:#3875d7;
            }
        .RadioStyle input+label:hover,
        .RadioStyle input+label:active,
        .RadioStyle input+label:focus{
                cursor: pointer;
                color:#3875d7;
                border:1px solid #3875d7;
            }
    </style>
</head>
<body class="container">


<div class="row" style="margin-top: 30px;" id="com"></div>

<!--        循环加载图片-->
<div class="col-md-12" id="imgs">

</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/jquery-labelauty.js"></script>

<script type="text/javascript" src="http://shouce.ren/static/ad/gg.js"></script>
</body>
<script>
    var html="";
    var c_brand,c_name,c_brand_more,c_name_more;
    var obj,money;
    var c_surface,c_dealer,c_fri_price,c_price;
    $(document).ready(function () {

        //右边商品信息
        $.ajax({
            url: "../../car/selectAllById",
            type: "post",
            dataType: "json",
            data: {
                c_id: sessionStorage.getItem("c_id")
            },
            success: function (result) {
                console.log(JSON.stringify(result));
                html= "<div class=\"\" style=\"font-family: '微软雅黑 Light';font-size:13px;\"><a href=\"gotoyhBuy\">汽车商城</a>&nbsp;&gt;&nbsp;<label>"+result.c_name+"</label> </div><br><hr>\n" +
                    "<div class=\"row\" style=\"padding-top: 10px\">\n" +
                    "    <div class=\"col-md-6\" style='padding-top: 3px'>\n" +
                    "             <div id='frimg'></div>"+
                    "             <div class=\"row\" style=\"padding-top: 10px;padding-left: 10px\">\n" +
                    "                <div  id=\"imgs\">\n" +
                    "                </div>"+
                    "             </div>"+
                    "    </div>\n" +
                    "    <div class=\"col-md-5 col-md-offset-1\">\n" +
                    "        <div class=\"row\">\n" +
                    "            <div class=\"col-md-12\" style=\"font-family: '微软雅黑 Light';font-weight: bolder; font-size: x-large;\">"+result.c_name+"</div>\n" +
                    "        </div><hr>\n" +
                    "        <div class=\"row\" style=\"font-family: '微软雅黑 Light';padding-top: 10px;font-size: 15px\">\n" +
                    "            <div class=\"col-md-3\" style=\"color: darkgrey;\">排量（ml）：</div>\n" +
                    "            <div class=\"col-md-3\" style=\"font-size: smaller\">"+result.c_displacement+"</div>\n" +
                    "            <div class=\"col-md-3\" style=\"color: darkgrey;\">级别：</div>\n" +
                    "            <div class=\"col-md-3\" style=\"font-size: smaller\">"+result.t_name+"</div>\n" +
                    "        </div>\n" +
                    "        <div class=\"row\" style=\"font-family: '微软雅黑 Light';padding-top: 10px;font-size: 15px\">\n" +
                    "            <div class=\"col-md-3\" style=\"color: darkgrey;\">变速箱：</div>\n" +
                    "            <div class=\"col-md-3\" style=\"font-size: smaller\">"+result.c_gearbox+"</div>\n" +
                    "            <div class=\"col-md-3\" style=\"color: darkgrey;\">车身类型：</div>\n" +
                    "            <div class=\"col-md-3\" style=\"font-size: smaller\">"+result.c_structure+"</div>\n" +
                    "        </div>\n" +
                    "        <div class=\"row\" style=\"font-family: '微软雅黑 Light';padding-top: 10px;font-size: 15px\">\n" +
                    "            <div class=\"col-md-3\" style=\"color: darkgray\">价格：</div>\n" +
                    "            <div class=\"col-md-3\" style=\"color: cornflowerblue\">￥"+result.c_price+"万</div>\n" +
                    "            <div class=\"col-md-3\"></div>\n" +
                    "            <div class=\"col-md-3\"><a href=\"/gotoyhContrast\" class='more'>查看更多</a></div>\n" +
                    "        </div><hr>\n" +
                    "        <div class=\"row\" style=\"font-family: '微软雅黑 Light';padding-top: 0px;color:black;\">\n" +
                    "                选择经销商：\n" +
                    "                  <select id=\"dealer\" style=\"border: none;outline: none;background-color:#f2f2f2;height: 50px;width: 250px\">\n" +
                    "                      <option value=\"\">——————请选择——————</option>\n" +
                    "                      <option>天津宝泽行汽车销售服务有限公司</option>\n" +
                    "                      <option>天津星德宝汽车销售服务有限公司</option>\n" +
                    "                      <option>天津宝晋行汽车销售服务有限公司</option>\n" +
                    "                      <option>天津宝信行汽车销售服务有限公司</option>\n" +
                    "                      <option>天津博瑞宝汽车销售服务有限公司</option>\n" +
                    "                      <option>天津美宝行汽车销售服务有限公司</option>\n" +
                    "                      <option>天津宝诚百旺汽车销售服务有限公司</option>\n" +
                    "                  </select>\n" +
                    "          <div>\n" +
                    "      </div><hr>"+
                    "        </div>\n" +
                    "        <div class=\"row\" style=\"font-family: '微软雅黑 Light';padding-top: 10px;color:black;\">\n" +
                    "                请选择分期方式\n" +
                    "            <div class=\"row\" style=\"padding-top: 10px\">\n" +
                    "<div class=\"RadioStyle\" style=\"margin-top: 8px\" id=\"neicun\">\n" +
                    "     <input type=\"radio\" name=\"styleType\"  id=\"rdo_0\" value=\""+result.c_price.toFixed(2)+"\" onchange='getMoney()'>\n" +
                    "     <label for=\"rdo_0\">不分期</label>\n" +
                    "     <input type=\"radio\" name=\"styleType\" id=\"rdo_1\" value=\""+(result.c_price / 3).toFixed(2)+"\" onchange='getMoney()'>\n" +
                    "     <label for=\"rdo_1\">" +
                    "                        "+(result.c_price / 3).toFixed(2)+"万起×3期</label>\n" +
                    "     <input type=\"radio\" name=\"styleType\"  id=\"rdo_2\" value=\""+(result.c_price / 6).toFixed(2)+"\" onchange='getMoney()'>\n" +
                    "     <label for=\"rdo_2\">" +
                    "                        "+(result.c_price / 6).toFixed(2)+"万起×6期</label>\n" +
                    "     <input type=\"radio\" name=\"styleType\"  id=\"rdo_3\" value=\""+(result.c_price / 12).toFixed(2)+"\" onchange='getMoney()'>\n" +
                    "     <label for=\"rdo_3\">" +
                    "                        "+(result.c_price / 12).toFixed(2)+"万起×12期</label>\n" +
                    "</div>"+
                    "            </div>\n" +
                    "        </div>\n" +
                    "        <div class=\"row\" style=\"font-family: '微软雅黑 Light';padding-top: 10px;font-size: 20px\">\n" +
                    "            <div class=\"col-md-5\" style=\"font-size: larger\">\n" +
                    "                <button class=\"bookbtn btn btn-info\" style='height: 40px' value=\"预约试驾\">预约试驾</button>\n" +
                    "            </div>\n" +
                    "            <div class=\"col-md-5 col-md-offset-1\">\n" +
                    "                <button class=\"shopcarbtn btn btn-danger\" style='height: 40px' value=\"加购物车\" >加购物车</button>\n" +
                    "            </div>\n" +
                    "        </div>\n" +
                    "    </div>\n" +
                    "</div>";

                c_brand=result.b_name;
                c_name=result.c_name;
                c_brand_more=result.b_name;
                c_name_more=result.c_name;
                c_surface=sessionStorage.setItem("c_surface",result.c_surface);
                c_price=sessionStorage.setItem("c_price",result.c_price);


                //左边图片
                $("#com").html(html);
                $.ajax({
                    url: "../../car/getInfoById",
                    type: "post",
                    dataType: "json",
                    // async:false,//同步方法，确保获取到id在加载其他方法
                    data: {
                        c_id: sessionStorage.getItem("c_id")
                    },
                    success: function (result) {
                        console.log(JSON.stringify(result));
                        var files = result.object;
                        var html = "";
                        var file= "<img src=\\" + files[1] + " width=\"491\" height=\"368\">\n";
                        for (var i = 0; i < 4; i++) {
                            html += "<img class='xiaotu' style='padding-left: 10px' src='" + files[i] + "' height='92' width='122'></img>"
                        }
                        $("#frimg").html(file);
                        $("#imgs").html(html);
                    }
                });

            }
        })






        $(document).on("click",".xiaotu",function () {
            datupian = $(this).attr("src");
            htmldatu = "<img src=\""+datupian+"\" width=\"491\" height=\"368\">\n"
            $("#frimg").html(htmldatu)
        })

        $(document).on("click",".more",function () {
            sessionStorage.setItem("c_brand_more",c_brand_more);
            sessionStorage.setItem("c_name_more",c_name_more);
        })

        $(document).on("click",".bookbtn",function () {

            sessionStorage.setItem("c_brand",c_brand);
            sessionStorage.setItem("c_name",c_name);
            sessionStorage.setItem("c_dealer",document.getElementById("dealer").options[document.getElementById("dealer").options.selectedIndex].text);
            $(location).attr("href","/gotoyhBook");
        })

        $(document).on("click",".shopcarbtn",function () {
            sessionStorage.setItem("c_dealer2",document.getElementById("dealer").options[document.getElementById("dealer").options.selectedIndex].text);
            if($('input:radio[name="styleType"]:checked').val()==null){
                alert("请选择分期方式")
            }else {
                if(sessionStorage.getItem("u_id")==null){
                    $(location).attr("href","/gotoyhShop");
                }else {
                    insertShop();
                }
            }
        })

        function insertShop(){
            $.ajax({
                url: "../../shopcar/insertShop",
                type: "post",
                dataType: "json",
                async:false,//同步方法，确保获取到id在加载其他方法
                data: {
                    u_id: sessionStorage.getItem("u_id"),
                    c_surface:sessionStorage.getItem("c_surface"),
                    c_name:c_name,
                    c_dealer:sessionStorage.getItem("c_dealer2"),
                    c_fri_price:money,
                    c_price:sessionStorage.getItem("c_price")

                },
                success: function (result) {
                    $(location).attr("href","/gotoyhShop");
                }
            });
        }


        $(document).on("change",".RadioStyle",function () {
            obj=document.getElementsByName("styleType");
            if(obj!=null){
                for(var i=0;i<obj.length;i++){
                    if(obj[i].checked){
                        money=obj[i].value;
                    }
                }
            }

        })

    })
</script>
</html>